<template>
	<view>
		<view class="auth-header">
			<statusBar></statusBar>
			<view class="back-head"><image src="/static/img/back-icon-white.png" @tap="back"></image></view>
		</view>
		<view class="auth-bg"><image src="/static/assert/auth-bg.png" mode=""></image></view>
		<view class="auth-form">
			<view>
				<!-- 手机注册 -->
				<view class="mobile">
					<!-- 地区 及 手机号 -->
					<view class="input-form-cell">
						<text class="line"></text>
						<input v-model="form.phoneNo" type="number" class="input" placeholder-class="placeholder-class" :placeholder="lang.phonenumber" />
					</view>
					<view class="input-form-cell">
						<view><image src="/static/assert/password-icon.png" class="password-icon"></image></view>
						<input type="text" v-model="form.nickname" class="input" placeholder-class="placeholder-class" placeholder="输入用户名" />
					</view>
					<!-- 密码 -->
					<view class="input-form-cell">
						<view><image src="/static/assert/password-icon.png" class="password-icon"></image></view>
						<input type="text" v-model="form.password" password class="input" placeholder-class="placeholder-class" :placeholder="lang.logined" />
					</view>

					<!-- 验证码 -->
					<view class="code-cell">
						<input type="number" v-model="form.verificationCode" class="input" placeholder-class="placeholder-class" :placeholder="lang.phoneverification" />
						<button @tap.stop="sendSMS" :disabled="SMSStatus" :class="SMSStatus ? '' : 'undisButton'">{{ phoneTime >= 60 ? lang.Getcode : phoneTime + 's' }}</button>
					</view>
					<!-- 邀请码 -->
					<view class="input-form-cell">
						<view><image src="/static/assert/invate-code.png" class="invate-code-icon"></image></view>
						<input v-model="form.companyCode" type="text" class="input" placeholder-class="placeholder-class" :placeholder="lang.optional" />
					</view>
					<!-- 协议 -->
					<view style="margin-top: 20upx;">
						<radio-group @change="radioChange">
							<label class="radio">
								<radio value="xieyi" checked id="radio" color="#729AFF" style="transform: scale(0.7);" />
								<text @tap="toweb">《用户服务协议》</text>
							</label>
						</radio-group>
					</view>
					<view class="option-foot">
						<!-- 注册按钮 -->
						<view class="auth-buttons">
							<button @tap="submit">{{ lang.registered }}</button>
						</view>
						<!-- 调转登录链接 -->
						<view class="link" @tap="$nav('./login')">{{ lang.Youhave }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
// import { register, sendCode } from '@/api/auth';
// import bus from '@/utils/server.js';
import { toast } from '@/utils/toast';
import md5 from 'js-md5';
import request from '@/utils/request';
export default {
	data() {
		return {
			type: 0,
			areaCode: '86',
			form: {
				phoneNo: '',
				nickname: '',
				password: '',
				verificationCode: '',
				companyCode: ""
			},
			eMailtimer: '',
			phoneTimer: '',
			eMailtime: 60,
			phoneTime: 60,
			idcode: ''
		};
	},
	onHide() {
		clearInterval(this.eMailtimer);
		clearInterval(this.phoneTimer);
	},
	methods: {
		MathRand() {
			var Num = '';
			for (var i = 0; i < 6; i++) {
				Num += Math.floor(Math.random() * 10);
			}
			this.idcode = Num;
		},
		toweb() {
			console.log(321);
			uni.navigateTo({
				url: './toweb'
			});
			
		},
		showSheet() {
			this.$nav('./country');
			bus.$on('countryChange', val => {
				this.areaCode = val;
			});
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		siwperChange(e) {
			this.type = e.detail.current;
			for (var i in this.form) {
				this.form[i] = '';
			}
		},
		radioChange(event) {
			console.log(321321);
		},

		submit() {
			if (this.idcode !== this.form.verificationCode) {
				toast('请输入正确验证码！');
				return false;
			}
			request('/customers/regist/add', 'POST', {
				guid: '001',
				mobile: this.form.phoneNo,
				hashedPassword: md5(this.form.password),
				vcode:this.form.verificationCode,
				companyCode: this.form.companyCode,
				nickname: this.form.nickname
			}).then(res => {
				console.log(res.data, 222);
				if (res.data.ResultCD == 'I001') {
					uni.showToast({
						title: '注册成功'
					});
					setTimeout(function() {
						uni.navigateTo({
							url: './login'
						});
					}, 3000);
				} else {
					toast(res.data.ErrorMsg);
				}
			});
		},

		sendSMS() {
			this.MathRand();
			if (this.phoneTime != 60 || this.eMailtime != 60) {
				return false;
			}
			request('/customers/regist/getvcode', 'POST', {
				guid: '001',
				mobile: this.form.phoneNo,
				code: this.idcode
			}).then(res => {
				if (res.data.ResultCD == 'I001') {
					clearInterval(this.phoneTimer);
					this.phoneTimer = setInterval(() => {
						this.phoneTime--;

						if (this.phoneTime <= 0) {
							clearInterval(this.phoneTimer);
							this.phoneTime = 60;
						}
					}, 1000);
				} else {
					toast(res.data.ErrorMsg);
				}
			});
		}
	},
	mounted() {},
	computed: {
		...mapState(['lang']),
		SMSStatus() {
			return this.form.phoneNo == '';
		},

		swierHeight() {
			return uni.getSystemInfoSync().windowHeight;
		}
	}
}; 
</script>

<style lang="scss" scoped>
@import './common.scss';
</style>
